import { memo, ReactElement } from "react";
import { Row, Col } from "antd";
import Image from "next/image";

import type { FC } from "react";
import type { IRecommend } from "@/services/modules/home";

import styles from "./index.module.scss";
import Link from "next/link";

export interface IProps {
  children?: ReactElement;
  recommends?: IRecommend[];
}

const Recommend: FC<IProps> = memo(function (props) {
  const { recommends } = props;
  return (
    <>
      <div className={styles.container}>
        <div className="wrapper">
          <Row>
            {recommends?.map((item) => {
              return (
                <Col span={12} key={item.id}>
                  <div className={styles["recommend-item"]}>
                    <h1 className={styles.text}>{item.title}</h1>
                    <Link href={"/detail?id=" + item.id}>
                      <Image
                        src={item.picStr!}
                        alt="recommend"
                        height={300}
                        width={542}
                        priority
                      ></Image>
                    </Link>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>
    </>
  );
});

export default Recommend;
Recommend.displayName = "Recommend";
